<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="到站时间" prop="arriveTime">
        <el-date-picker clearable v-model="form.arriveTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择到站时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="车头号码" prop="carHead">
        <el-select clearable v-model="form.carHead" placeholder="请选择车头号码" style="width:100%">
          <el-option v-for="item in carHeadOptions" :key="item.carId" :value="item.carNum"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车身号码" prop="carBody">
        <el-select clearable v-model="form.carBody" placeholder="请选择车身号码" style="width:100%">
          <el-option v-for="item in carBodyOptions" :key="item.carId" :value="item.carNum"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="中海油销售单位" prop="enterpriseId">
        <el-select clearable v-model="form.enterpriseId" placeholder="请选择中海油销售单位" style="width:100%">
          <el-option v-for="item in baseInfoOptions.customersList" :key="item.customerId" :label="item.customerName"
            :value="item.customerId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户名称" prop="customerId">
        <el-select clearable v-model="form.customerId" placeholder="请选择客户名称" style="width:100%">
          <el-option v-for="item in baseInfoOptions.customersList" :key="item.customerId" :label="item.customerName"
            :value="item.customerId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="司机联系人" prop="driverId">
        <el-select clearable v-model="form.driverId" placeholder="请选择司机联系人" style="width:100%">
          <el-option v-for="item in baseInfoOptions.driverInfoList" :key="item.driverId" :label="item.driverName"
            :value="item.driverId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
  
<script>

export default {
  name: "ExtSale",
  props: {
    baseInfoOptions: {
      type: Object,
      default: () => {
        return {
          carNumsList: [],
          customersList: [],
          driverInfoList: []
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  computed: {
    carHeadOptions() {
      return this.baseInfoOptions.carNumsList.filter(item => item.carType === 1)
    },
    carBodyOptions() {
      return this.baseInfoOptions.carNumsList.filter(item => item.carType === 2)
    }
  },
  created() {

  },
  methods: {
    open(data) {
      this.form = JSON.parse(JSON.stringify(data))
      this.title = "新增"
      this.dialogVisible = true
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.dialogVisible = false
      // this.$emit("cancel")
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const sendData = JSON.parse(JSON.stringify(this.form))
          sendData.customerName = this.baseInfoOptions.customersList.find(item => item.customerId === sendData.customerId).customerName
          sendData.driverName = this.baseInfoOptions.driverInfoList.find(item => item.driverId === sendData.driverId).driverName
          sendData.driverTel = this.baseInfoOptions.driverInfoList.find(item => item.driverId === sendData.driverId).driverTele
          sendData.enterpriseName = this.baseInfoOptions.customersList.find(item => item.customerId === sendData.enterpriseId).customerName
          this.$emit('submit', sendData)
        }
      });
    }
  }
};
</script>
  